<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>{{className}}</el-breadcrumb-item>
    </el-breadcrumb>
    <h2>
      <span style="border-bottom:5px solid #ff5e52; ">{{className}}</span>
    </h2>
    <div class="textBox" v-for="item in newsListByClassId" :key="item.newsId">
      <h3>
        <router-link :to="'/index/show?newsId='+item.newsId">{{item.title}}</router-link>
      </h3>
      <p class="timeInfo">
        <span>{{item.userName}}</span>发布于
        <span>{{item.date}}</span>
      </p>

      <hr size="1px" color="#eeeeee" />
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      newsListByClassId: [],
      className: ''
    }
  },
  created () {
    this.getClassListById()
    this.getClassName()
  },
  methods: {
    async getClassListById () {
      const { data: res } = await this.$http.get('api/classId', {
        params: {
          classId: this.$route.query.classId
        }
      })
      console.log(res)
      this.newsListByClassId = res.Table
    },
    async getClassName () {
      const { data: res } = await this.$http.get('api/class', {
        params: {
          id: this.$route.query.classId
        }
      })
      // console.log(res)
      this.className = res.Table[0].name
    }
  },
  watch: {
    // 同一个页面，当从编辑页面跳到增加页面时，重新刷新页面
    $route (to, from) { // 监听路由是否变化
      this.getClassName()
      this.getClassListById()
    }
  }
}
</script>
<style lang="less" scoped>
.newsclass {
  background-color: #fff;
  // height: 731px;
  h2 {
    margin-bottom: 50px;
  }
  .textBox {
    width: 100%;

    .content {
      height: 100px;
      margin: 20px;
      display: flex;
      justify-content: space-between;
      color: #777777;
      font-size: 15px;
      .imgBox {
        width: 25%;
        height: 100%;
        img {
          height: 100%;
        }
      }
    }
    h3 {
      margin: 20px;
    }

    .timeInfo {
      font-size: 12px;
      color: #666666;
      padding-left: 20px;
    }
  }
}
a {
  color: #000000;
  text-decoration: none;
  transition: all 200ms;
}
a:hover {
  font-size: 20px;
}
</style>
